<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>
<div id="app" style="padding-bottom: 200px">
    <h3>带label的输入框</h3>
    <label style="display:inline-block; width: 100px">用户名: </label><input type="text"><br>
    <label style="display:inline-block; width: 100px">密码: </label><input>
    <myinput label="用户名" label-width="150px"></myinput>
    <myinput label="密码" prompt="请输入密码"></myinput>

    <h3>自动生成选项的下拉框</h3>
    <select>
        <option>初中</option>
        <option>高中</option>
        <option>专科</option>
        <option>本科</option>
    </select>

<!--    ref 用于定义组件变量名-->
    <myselect :items="eduItems" label="学历" ref="mySlt"
            v-on:reset-color="resetColor"></myselect>


    <input v-model="color">
    <button @click="setColor">设置背景色</button>

<!--    <myCmp>-->
<!--        <myselect :items="eduItems" label="学历" ref="mySlt"></myselect>-->
<!--    </myCmp>-->

</div>
<script>
    // 注册组件
    Vue.component("myinput",{
        // template 内部元素, 必须是 单 根节点
        template : `
        <div style="padding: 5px">
            <label style="display:inline-block;"
                   :style="{width: this.labelWidth || '100px'}" >
               {{label}} :
            </label>
            <input :placeholder="placeholder">
        </div>
        `,
        // 定义组件属性, 定义同样不能用驼峰命名法, 使用时, vue会转成驼峰命名
        // vue 组件属性, 是只读的
        props : ["label", "label-width", "prompt"],
        // 数据模型
        data (){
            return {
                placeholder : null
            };
        },
        created(){
            this.placeholder = this.prompt || "请输入";
        },
        methods :{

        }
    })

    Vue.component("myselect",{
        // props 对象语法, 可以限定属性的数据类型 和 验证规则
        props : {
            items : Array,   //  限定 items 必须是数值
            label : String   // 限定 字符串类型
        },
        data(){
            return {
                bgcolor : '#eee'
            }
        },
        template : `
            <div :style="{backgroundColor : bgcolor}">
                <label >{{label || "下拉列表"}}:</label>
                <select>
                    <option v-for="item,i in items">
                    {{i}} - {{item}}
                    </option>
                </select>
                <button @click="setParentColor">设置父对象的 color 值</button>
            </div>
        `,
        methods: {
            setParentColor(){
                // 直接访问父对象 (内置对象)  不建议使用
                // this.$parent.color = '#eee';

                // 自定义事件, 用 $emit 定义事件
                this.$emit("reset-color", '#eee', 1,2);
            },
        }
    }

    )


    var v = new Vue({
        el : "#app",
        data : {
            eduItems : ["初中","高中","专科","本科"],
            color: '#ddd'
        },
        methods :{
            setColor(){
                // vue 的内置对象 , 以$开头
                var mySlt = this.$refs.mySlt;  // 引用组件元素
                // 访问组件内部属性
                mySlt.bgcolor = this.color;
            },
            resetColor(color, num1, num2){
                console.info(num1, num2);
                this.color = color;
            }
        }
    })
</script>

</body>
</html>